<script setup>
import { useRoute } from 'vue-router';
import Tabbar from "./components/Tabbar.vue";
import NavBar from "./components/NavBar.vue";

const route = useRoute();
// 定义Tabbar对应的四个页面路径
const tabbarPaths = ['/', '/Booking', '/Map', '/Personal'];
</script>

<template>
  <div id="app">
    <!-- 仅当路径不属于Tabbar页面时显示NavBar -->
    <NavBar v-if="!tabbarPaths.includes(route.path)"></NavBar>
    <router-view />
    <!-- 仅当路径属于Tabbar页面时显示Tabbar -->
    <Tabbar route v-if="tabbarPaths.includes(route.path)" />
  </div>
</template>

<style>
#app {
  background: #f3f4f6;
  padding-bottom: 50px;
  min-height: 100vh;
  width: 100%;
}
</style>
